<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>客户列表页 - 人力资源管理系统</title>
  <link rel="stylesheet" href="styles.css">
  <style>
    /* 移除重复的基础样式，只保留页面特定样式 */
    .filter-bar {
      background: #fff;
      border-radius: 6px;
      padding: 18px 24px;
      margin-bottom: 18px;
      display: flex;
      gap: 16px;
      align-items: center;
      box-shadow: 0 1px 4px rgba(0,0,0,0.03);
    }
    .filter-bar input, .filter-bar select {
      padding: 6px 10px;
      border: 1px solid #d9d9d9;
      border-radius: 4px;
      font-size: 14px;
    }
    .filter-bar button {
      background: #40a9ff;
      color: #fff;
      border: none;
      border-radius: 4px;
      padding: 6px 18px;
      font-size: 14px;
      cursor: pointer;
    }
    .table-area {
      background: #fff;
      border-radius: 6px;
      padding: 18px 0 0 0;
      box-shadow: 0 1px 4px rgba(0,0,0,0.03);
    }
    table {
      width: 100%;
      border-collapse: collapse;
      font-size: 14px;
    }
    th, td {
      padding: 10px 12px;
      border-bottom: 1px solid #f0f0f0;
      text-align: left;
    }
    th {
      background: #f5f7fa;
      font-weight: 600;
      color: #232a3b;
    }
    tr:last-child td {
      border-bottom: none;
    }
    .table-actions button {
      background: none;
      border: none;
      color: #40a9ff;
      cursor: pointer;
      margin-right: 8px;
    }
    .table-actions .delete-btn {
      color: #ff4d4f;
    }
    .action-button.danger {
      background-color: #ff4d4f;
      color: white;
      border: none;
    }
    .modal-overlay {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: rgba(0, 0, 0, 0.5);
      display: none;
      justify-content: center;
      align-items: center;
      z-index: 1000;
    }
    .modal {
      background: #fff;
      border-radius: 8px;
      width: 600px;
      max-height: 80vh;
      overflow-y: auto;
    }
    .modal-header {
      padding: 16px 24px;
      border-bottom: 1px solid #e5e6eb;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .modal-title {
      font-size: 18px;
      font-weight: bold;
      color: #232a3b;
    }
    .modal-close {
      cursor: pointer;
      font-size: 20px;
      color: #666;
    }
    .modal-body {
      padding: 24px;
    }
    .modal-footer {
      padding: 16px 24px;
      border-top: 1px solid #e5e6eb;
      display: flex;
      justify-content: flex-end;
      gap: 12px;
    }
    .form-group {
      margin-bottom: 16px;
    }
    .form-label {
      display: block;
      margin-bottom: 8px;
      font-size: 14px;
      color: #232a3b;
    }
    .form-input {
      width: 100%;
      padding: 8px 12px;
      border: 1px solid #d9d9d9;
      border-radius: 4px;
      font-size: 14px;
    }
    .form-input:focus {
      border-color: #40a9ff;
      outline: none;
    }
    .region-select {
      display: flex;
      gap: 8px;
    }
    .region-select select {
      flex: 1;
      padding: 8px 12px;
      border: 1px solid #d9d9d9;
      border-radius: 4px;
      font-size: 14px;
    }
    .region-select select:focus {
      border-color: #40a9ff;
      outline: none;
    }
    .customer-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
      gap: 24px;
      margin-top: 24px;
    }

    .customer-card {
      background: #fff;
      border-radius: 12px;
      padding: 24px;
      box-shadow: var(--shadow);
      border: 1px solid var(--border-color);
      transition: all 0.3s ease;
    }

    .customer-card:hover {
      transform: translateY(-2px);
      box-shadow: var(--shadow-md);
    }

    .customer-header {
      display: flex;
      align-items: center;
      gap: 16px;
      margin-bottom: 16px;
    }

    .customer-logo {
      width: 60px;
      height: 60px;
      border-radius: 8px;
      object-fit: cover;
      background: #f4f4f4;
    }

    .customer-info {
      flex: 1;
    }

    .customer-name {
      font-size: 18px;
      font-weight: 600;
      color: var(--text-primary);
      margin-bottom: 4px;
    }

    .customer-industry {
      font-size: 14px;
      color: var(--text-secondary);
    }

    .customer-status {
      display: inline-flex;
      align-items: center;
      padding: 4px 12px;
      border-radius: 12px;
      font-size: 12px;
      font-weight: 500;
    }

    .status-active {
      background: rgba(82, 196, 26, 0.1);
      color: var(--success-color);
    }

    .status-inactive {
      background: rgba(250, 173, 20, 0.1);
      color: var(--warning-color);
    }

    .customer-details {
      margin-top: 16px;
      padding-top: 16px;
      border-top: 1px solid var(--border-color);
    }

    .detail-item {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 8px;
      font-size: 14px;
      color: var(--text-secondary);
    }

    .detail-item:last-child {
      margin-bottom: 0;
    }

    .customer-actions {
      display: flex;
      gap: 8px;
      margin-top: 16px;
    }

    .search-form {
      background: #fff;
      border: 1px solid var(--border-color);
      border-radius: 4px;
      padding: 24px;
      margin-bottom: 16px;
    }

    .search-form-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 24px;
    }

    .form-item {
      display: flex;
      align-items: center;
    }

    .form-label {
      font-size: 14px;
      color: var(--text-primary);
      margin-right: 8px;
      flex-shrink: 0;
      width: 70px;
      text-align: right;
    }

    .form-input, .form-select {
      flex: 1;
      height: 32px;
      padding: 0 12px;
      border: 1px solid var(--border-color);
      border-radius: 4px;
      font-size: 14px;
      background: #fff;
      width: calc(100% - 78px);
    }

    .search-buttons {
      display: flex;
      gap: 16px;
    }

    .action-buttons {
      margin-bottom: 16px;
      display: flex;
      gap: 12px;
    }
    
    /* 响应式设计优化 */
    @media screen and (max-width: 1366px) {
      /* 搜索表单优化 */
      .search-form-grid {
        grid-template-columns: repeat(3, 1fr);
      }
      
      /* 内容区域padding调整 */
      .content {
        padding: 16px;
      }
      
      /* 表格内容溢出处理 */
      .table-area {
        overflow-x: auto;
      }
      
      /* 弹窗大小调整 */
      .modal {
        width: 95%;
        max-width: 95%;
      }
    }
    
    @media screen and (max-width: 1024px) {
      /* 搜索表单进一步优化 */
      .search-form-grid {
        grid-template-columns: repeat(2, 1fr);
      }
      
      /* 地区选择优化 */
      .region-select {
        flex-direction: column;
        gap: 8px;
      }
      
      /* 按钮组调整 */
      .action-buttons {
        flex-wrap: wrap;
      }
    }
    
    @media screen and (max-width: 768px) {
      /* 搜索表单再次优化 */
      .search-form-grid {
        grid-template-columns: 1fr;
      }
      
      /* 操作按钮调整 */
      .table-actions {
        flex-wrap: wrap;
      }
      
      /* 头部和尾部调整 */
      .topbar {
        padding: 0 16px;
      }
      
      /* 表格内容适应 */
      table {
        font-size: 12px;
      }
      
      th, td {
        padding: 8px 10px;
      }
      
      /* 弹窗模态框调整 */
      .modal-body {
        padding: 16px;
      }
      
      .modal-footer {
        padding: 12px 16px;
      }
    }
    
    /* 表格横向滚动优化 */
    .table-container {
      width: 100%;
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
    }
    
    /* 确保表格在横向滚动时表头固定 */
    .sticky-header th {
      position: sticky;
      top: 0;
      z-index: 10;
      background: #f5f7fa;
    }

    .pagination {
      display: flex;
      justify-content: flex-end;
      align-items: center;
      margin-top: 16px;
      gap: 8px;
      border: 1px solid #ff4d4f;
      border-radius: 2px;
      display: inline-flex;
      float: right;
      margin-top: 20px;
      margin-bottom: 20px;
    }

    .pagination button {
      min-width: 32px;
      height: 32px;
      border: none;
      background: #fff;
      cursor: pointer;
      font-size: 14px;
      color: var(--text-primary);
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0;
      padding: 0 12px;
    }

    .pagination button.active {
      background: var(--primary-color);
      color: #fff;
    }

    .pagination button:not(.active):hover {
      color: var(--primary-color);
    }

    .pagination button:first-child, .pagination button:last-child {
      padding: 0 8px;
      background: #f5f5f5;
      color: #666;
      border-right: 1px solid #eee;
      border-left: 1px solid #eee;
    }
  </style>
</head>
<body>
  <div class="layout">
    <!-- 使用公共侧边栏 -->
    <div id="sidebar-container"></div>

    <div class="main">
      <div class="topbar">
        <div class="title">客户列表</div>
        <div class="user">
          <span>管理员</span>
          <img src="assets/avatar.png" alt="用户头像">
        </div>
      </div>
      <div class="content">
        <div class="search-form">
          <div class="search-form-grid">
            <div class="form-item">
              <label class="form-label">客户名称</label>
              <input type="text" class="form-input" placeholder="请输入客户名称">
            </div>
            <div class="form-item">
              <label class="form-label">所属地区</label>
              <select class="form-select">
                <option value="">全部地区</option>
                <option value="north">华北</option>
                <option value="east">华东</option>
                <option value="south">华南</option>
                <option value="southwest">西南</option>
                <option value="northwest">西北</option>
              </select>
            </div>
            <div class="form-item">
              <label class="form-label">开始日期</label>
              <input type="date" class="form-input">
            </div>
            <div class="form-item">
              <label class="form-label">结束日期</label>
              <input type="date" class="form-input">
            </div>
            <div class="form-item search-buttons">
              <button type="button" class="btn btn-primary">搜索</button>
              <button type="button" class="btn btn-default">重置</button>
            </div>
          </div>
        </div>

        <div class="action-buttons">
          <button class="btn btn-primary">新建客户</button>
        </div>

        <div class="table-area">
          <div class="table-container">
            <table style="min-width: 1200px;">
              <thead class="sticky-header">
                <tr>
                  <th width="20%">客户名称</th>
                  <th width="15%">行业</th>
                  <th width="20%">所属地区</th>
                  <th width="15%">联系方式</th>
                  <th width="10%">联系人</th>
                  <th width="20%">操作</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td>示例科技有限公司</td>
                  <td>IT服务</td>
                  <td>北京市 北京市 朝阳区</td>
                  <td>010-88888888</td>
                  <td>张三</td>
                  <td class="table-actions">
                    <button>详情</button>
                    <button>查看合同</button>
                    <button class="edit-btn">编辑</button>
                    <button class="delete-btn">删除</button>
                  </td>
                </tr>
                <tr>
                  <td>安信贸易</td>
                  <td>贸易</td>
                  <td>上海市 上海市 浦东新区</td>
                  <td>021-66666666</td>
                  <td>李四</td>
                  <td class="table-actions">
                    <button>详情</button>
                    <button>查看合同</button>
                    <button class="edit-btn">编辑</button>
                    <button class="delete-btn">删除</button>
                  </td>
                </tr>
                <tr>
                  <td>荣耀电子科技</td>
                  <td>电子制造</td>
                  <td>广东省 深圳市 南山区</td>
                  <td>0755-23456789</td>
                  <td>王五</td>
                  <td class="table-actions">
                    <button>详情</button>
                    <button>查看合同</button>
                    <button class="edit-btn">编辑</button>
                    <button class="delete-btn">删除</button>
                  </td>
                </tr>
                <tr>
                  <td>未来网络有限公司</td>
                  <td>互联网</td>
                  <td>浙江省 杭州市 西湖区</td>
                  <td>0571-87654321</td>
                  <td>赵六</td>
                  <td class="table-actions">
                    <button>详情</button>
                    <button>查看合同</button>
                    <button class="edit-btn">编辑</button>
                    <button class="delete-btn">删除</button>
                  </td>
                </tr>
                <tr>
                  <td>金融创新投资</td>
                  <td>金融</td>
                  <td>上海市 上海市 黄浦区</td>
                  <td>021-33335555</td>
                  <td>钱七</td>
                  <td class="table-actions">
                    <button>详情</button>
                    <button>查看合同</button>
                    <button class="edit-btn">编辑</button>
                    <button class="delete-btn">删除</button>
                  </td>
                </tr>
                <tr>
                  <td>华夏机械制造</td>
                  <td>制造业</td>
                  <td>江苏省 苏州市 工业园区</td>
                  <td>0512-98765432</td>
                  <td>孙八</td>
                  <td class="table-actions">
                    <button>详情</button>
                    <button>查看合同</button>
                    <button class="edit-btn">编辑</button>
                    <button class="delete-btn">删除</button>
                  </td>
                </tr>
                <tr>
                  <td>绿色环保科技</td>
                  <td>环保</td>
                  <td>四川省 成都市 高新区</td>
                  <td>028-55556666</td>
                  <td>周九</td>
                  <td class="table-actions">
                    <button>详情</button>
                    <button>查看合同</button>
                    <button class="edit-btn">编辑</button>
                    <button class="delete-btn">删除</button>
                  </td>
                </tr>
                <tr>
                  <td>北方教育集团</td>
                  <td>教育</td>
                  <td>河北省 石家庄市 裕华区</td>
                  <td>0311-77889900</td>
                  <td>吴十</td>
                  <td class="table-actions">
                    <button>详情</button>
                    <button>查看合同</button>
                    <button class="edit-btn">编辑</button>
                    <button class="delete-btn">删除</button>
                  </td>
                </tr>
                <tr>
                  <td>星辰医疗器械</td>
                  <td>医疗</td>
                  <td>山东省 青岛市 城阳区</td>
                  <td>0532-12345678</td>
                  <td>郑十一</td>
                  <td class="table-actions">
                    <button>详情</button>
                    <button>查看合同</button>
                    <button class="edit-btn">编辑</button>
                    <button class="delete-btn">删除</button>
                  </td>
                </tr>
                <tr>
                  <td>东方食品集团</td>
                  <td>食品</td>
                  <td>湖北省 武汉市 江汉区</td>
                  <td>027-44556677</td>
                  <td>王十二</td>
                  <td class="table-actions">
                    <button>详情</button>
                    <button>查看合同</button>
                    <button class="edit-btn">编辑</button>
                    <button class="delete-btn">删除</button>
                  </td>
                </tr>
                <tr>
                  <td>海洋物流</td>
                  <td>物流</td>
                  <td>福建省 厦门市 思明区</td>
                  <td>0592-33445566</td>
                  <td>陈十三</td>
                  <td class="table-actions">
                    <button>详情</button>
                    <button>查看合同</button>
                    <button class="edit-btn">编辑</button>
                    <button class="delete-btn">删除</button>
                  </td>
                </tr>
                <tr>
                  <td>云图数据科技</td>
                  <td>大数据</td>
                  <td>北京市 北京市 海淀区</td>
                  <td>010-77889900</td>
                  <td>刘十四</td>
                  <td class="table-actions">
                    <button>详情</button>
                    <button>查看合同</button>
                    <button class="edit-btn">编辑</button>
                    <button class="delete-btn">删除</button>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
          <div class="pagination">
            <button>上一页</button>
            <button class="active">1</button>
            <button>2</button>
            <button>3</button>
            <button>下一页</button>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- 新增客户弹窗 -->
  <div class="modal-overlay" id="newCustomerModal">
    <div class="modal">
      <div class="modal-header">
        <div class="modal-title">新增客户</div>
        <div class="modal-close">×</div>
      </div>
      <div class="modal-body">
        <div class="form-group">
          <label class="form-label">客户名称</label>
          <input type="text" class="form-input" placeholder="请输入客户名称">
        </div>
        <div class="form-group">
          <label class="form-label">所属行业</label>
          <select class="form-input">
            <option>请选择行业</option>
            <option>IT服务</option>
            <option>贸易</option>
            <option>制造业</option>
            <option>金融</option>
          </select>
        </div>
        <div class="form-group">
          <label class="form-label">所属地区</label>
          <div class="region-select">
            <select id="province" class="form-input">
              <option value="">请选择省份</option>
              <option value="11">北京市</option>
              <option value="12">天津市</option>
              <option value="13">河北省</option>
              <option value="14">山西省</option>
              <option value="15">内蒙古自治区</option>
              <option value="21">辽宁省</option>
              <option value="22">吉林省</option>
              <option value="23">黑龙江省</option>
              <option value="31">上海市</option>
              <option value="32">江苏省</option>
              <option value="33">浙江省</option>
              <option value="34">安徽省</option>
              <option value="35">福建省</option>
              <option value="36">江西省</option>
              <option value="37">山东省</option>
              <option value="41">河南省</option>
              <option value="42">湖北省</option>
              <option value="43">湖南省</option>
              <option value="44">广东省</option>
              <option value="45">广西壮族自治区</option>
              <option value="46">海南省</option>
              <option value="50">重庆市</option>
              <option value="51">四川省</option>
              <option value="52">贵州省</option>
              <option value="53">云南省</option>
              <option value="54">西藏自治区</option>
              <option value="61">陕西省</option>
              <option value="62">甘肃省</option>
              <option value="63">青海省</option>
              <option value="64">宁夏回族自治区</option>
              <option value="65">新疆维吾尔自治区</option>
            </select>
            <select id="city" class="form-input" disabled>
              <option value="">请选择城市</option>
            </select>
            <select id="district" class="form-input" disabled>
              <option value="">请选择区县</option>
            </select>
          </div>
        </div>
        <div class="form-group">
          <label class="form-label">联系方式</label>
          <input type="text" class="form-input" placeholder="请输入联系方式">
        </div>
        <div class="form-group">
          <label class="form-label">联系人</label>
          <input type="text" class="form-input" placeholder="请输入联系人姓名">
        </div>
      </div>
      <div class="modal-footer">
        <button class="action-button secondary">取消</button>
        <button class="action-button">确定</button>
      </div>
    </div>
  </div>

  <!-- 客户详情弹窗 -->
  <div class="modal-overlay" id="customerDetailModal">
    <div class="modal">
      <div class="modal-header">
        <div class="modal-title">客户详情</div>
        <div class="modal-close">×</div>
      </div>
      <div class="modal-body">
        <div class="form-group">
          <label class="form-label">客户名称</label>
          <div class="form-input" style="background:#f5f7fa;">示例科技有限公司</div>
        </div>
        <div class="form-group">
          <label class="form-label">所属行业</label>
          <div class="form-input" style="background:#f5f7fa;">IT服务</div>
        </div>
        <div class="form-group">
          <label class="form-label">所属地区</label>
          <div class="form-input" style="background:#f5f7fa;">北京市 北京市 朝阳区</div>
        </div>
        <div class="form-group">
          <label class="form-label">联系方式</label>
          <div class="form-input" style="background:#f5f7fa;">010-88888888</div>
        </div>
        <div class="form-group">
          <label class="form-label">联系人</label>
          <div class="form-input" style="background:#f5f7fa;">张三</div>
        </div>
      </div>
      <div class="modal-footer">
        <button class="action-button">关闭</button>
      </div>
    </div>
  </div>

  <!-- 编辑客户弹窗 -->
  <div class="modal-overlay" id="editCustomerModal">
    <div class="modal">
      <div class="modal-header">
        <div class="modal-title">编辑客户</div>
        <div class="modal-close">×</div>
      </div>
      <div class="modal-body">
        <div class="form-group">
          <label class="form-label">客户名称</label>
          <input type="text" class="form-input" placeholder="请输入客户名称" value="示例科技有限公司">
        </div>
        <div class="form-group">
          <label class="form-label">所属行业</label>
          <select class="form-input">
            <option>请选择行业</option>
            <option selected>IT服务</option>
            <option>贸易</option>
            <option>制造业</option>
            <option>金融</option>
          </select>
        </div>
        <div class="form-group">
          <label class="form-label">所属地区</label>
          <div class="region-select">
            <select id="edit-province" class="form-input">
              <option value="">请选择省份</option>
              <option value="11" selected>北京市</option>
              <option value="12">天津市</option>
              <option value="13">河北省</option>
              <option value="14">山西省</option>
              <option value="15">内蒙古自治区</option>
              <option value="21">辽宁省</option>
              <option value="22">吉林省</option>
              <option value="23">黑龙江省</option>
              <option value="31">上海市</option>
              <option value="32">江苏省</option>
              <option value="33">浙江省</option>
              <option value="34">安徽省</option>
              <option value="35">福建省</option>
              <option value="36">江西省</option>
              <option value="37">山东省</option>
              <option value="41">河南省</option>
              <option value="42">湖北省</option>
              <option value="43">湖南省</option>
              <option value="44">广东省</option>
              <option value="45">广西壮族自治区</option>
              <option value="46">海南省</option>
              <option value="50">重庆市</option>
              <option value="51">四川省</option>
              <option value="52">贵州省</option>
              <option value="53">云南省</option>
              <option value="54">西藏自治区</option>
              <option value="61">陕西省</option>
              <option value="62">甘肃省</option>
              <option value="63">青海省</option>
              <option value="64">宁夏回族自治区</option>
              <option value="65">新疆维吾尔自治区</option>
            </select>
            <select id="edit-city" class="form-input">
              <option value="">请选择城市</option>
              <option value="1101" selected>北京市</option>
            </select>
            <select id="edit-district" class="form-input">
              <option value="">请选择区县</option>
              <option value="110101">东城区</option>
              <option value="110102">西城区</option>
              <option value="110105" selected>朝阳区</option>
              <option value="110106">丰台区</option>
              <option value="110107">石景山区</option>
              <option value="110108">海淀区</option>
            </select>
          </div>
        </div>
        <div class="form-group">
          <label class="form-label">联系方式</label>
          <input type="text" class="form-input" placeholder="请输入联系方式" value="010-88888888">
        </div>
        <div class="form-group">
          <label class="form-label">联系人</label>
          <input type="text" class="form-input" placeholder="请输入联系人姓名" value="张三">
        </div>
      </div>
      <div class="modal-footer">
        <button class="action-button secondary">取消</button>
        <button class="action-button">保存</button>
      </div>
    </div>
  </div>

  <!-- 删除确认弹窗 -->
  <div class="modal-overlay" id="deleteConfirmModal">
    <div class="modal" style="width: 400px;">
      <div class="modal-header">
        <div class="modal-title">删除确认</div>
        <div class="modal-close">×</div>
      </div>
      <div class="modal-body">
        <p style="text-align: center; margin: 20px 0;">确定要删除该客户吗？此操作不可撤销。</p>
      </div>
      <div class="modal-footer">
        <button class="action-button secondary">取消</button>
        <button class="action-button danger">确认删除</button>
      </div>
    </div>
  </div>

  <script src="js/common.js"></script>
  <script>
    // 页面加载完成后加载组件
    document.addEventListener('DOMContentLoaded', loadComponents);

    // 其他页面特定的 JavaScript 代码
    // 新增客户按钮点击事件
    document.querySelector('.action-buttons .btn-primary').addEventListener('click', function() {
      document.getElementById('newCustomerModal').style.display = 'flex';
    });

    // 详情按钮点击事件
    document.querySelectorAll('.table-actions button:nth-child(1)').forEach(button => {
      button.addEventListener('click', function() {
        document.getElementById('customerDetailModal').style.display = 'flex';
      });
    });

    // 查看合同按钮点击事件
    document.querySelectorAll('.table-actions button:nth-child(2)').forEach(button => {
      button.addEventListener('click', function() {
        window.location.href = 'contract-management.html';
      });
    });
    
    // 编辑按钮点击事件
    document.querySelectorAll('.table-actions .edit-btn').forEach(button => {
      button.addEventListener('click', function() {
        document.getElementById('editCustomerModal').style.display = 'flex';
      });
    });
    
    // 删除按钮点击事件
    document.querySelectorAll('.table-actions .delete-btn').forEach(button => {
      button.addEventListener('click', function() {
        document.getElementById('deleteConfirmModal').style.display = 'flex';
      });
    });

    // 关闭弹窗
    document.querySelectorAll('.modal-close, .modal-footer .action-button.secondary').forEach(element => {
      element.addEventListener('click', function() {
        document.querySelectorAll('.modal-overlay').forEach(modal => {
          modal.style.display = 'none';
        });
      });
    });
    
    // 确认删除按钮点击事件
    document.querySelector('#deleteConfirmModal .action-button.danger').addEventListener('click', function() {
      alert('删除成功');
      document.getElementById('deleteConfirmModal').style.display = 'none';
    });

    // 省市区数据（示例数据）
    const regionData = {
      '11': {
        name: '北京市',
        cities: {
          '1101': {
            name: '北京市',
            districts: {
              '110101': '东城区',
              '110102': '西城区',
              '110105': '朝阳区',
              '110106': '丰台区',
              '110107': '石景山区',
              '110108': '海淀区',
              '110109': '门头沟区',
              '110111': '房山区',
              '110112': '通州区',
              '110113': '顺义区',
              '110114': '昌平区',
              '110115': '大兴区',
              '110116': '怀柔区',
              '110117': '平谷区',
              '110118': '密云区',
              '110119': '延庆区'
            }
          }
        }
      },
      '31': {
        name: '上海市',
        cities: {
          '3101': {
            name: '上海市',
            districts: {
              '310101': '黄浦区',
              '310104': '徐汇区',
              '310105': '长宁区',
              '310106': '静安区',
              '310107': '普陀区',
              '310109': '虹口区',
              '310110': '杨浦区',
              '310112': '闵行区',
              '310113': '宝山区',
              '310114': '嘉定区',
              '310115': '浦东新区',
              '310116': '金山区',
              '310117': '松江区',
              '310118': '青浦区',
              '310120': '奉贤区',
              '310151': '崇明区'
            }
          }
        }
      }
      // 更多省市区数据...
    };

    // 省份选择事件
    document.getElementById('province').addEventListener('change', function() {
      const citySelect = document.getElementById('city');
      const districtSelect = document.getElementById('district');
      const provinceData = regionData[this.value];
      
      // 重置城市和区县选择
      citySelect.innerHTML = '<option value="">请选择城市</option>';
      districtSelect.innerHTML = '<option value="">请选择区县</option>';
      districtSelect.disabled = true;
      
      if (provinceData) {
        citySelect.disabled = false;
        Object.entries(provinceData.cities).forEach(([code, city]) => {
          const option = new Option(city.name, code);
          citySelect.add(option);
        });
      } else {
        citySelect.disabled = true;
      }
    });

    // 城市选择事件
    document.getElementById('city').addEventListener('change', function() {
      const districtSelect = document.getElementById('district');
      const provinceData = regionData[document.getElementById('province').value];
      const cityData = provinceData?.cities[this.value];
      
      // 重置区县选择
      districtSelect.innerHTML = '<option value="">请选择区县</option>';
      
      if (cityData) {
        districtSelect.disabled = false;
        Object.entries(cityData.districts).forEach(([code, name]) => {
          const option = new Option(name, code);
          districtSelect.add(option);
        });
      } else {
        districtSelect.disabled = true;
      }
    });
  </script>
</body>
</html> 